﻿<template>
    <div>
       
        <div class="layout-main">
            <el-form ref="queryParams" inline label-position="right" label-width="120px" v-model="queryParams">
                <el-form-item  label="请求级别">
                    <el-select size="small" v-model="queryParams.optLevel" placeholder="请求类型" style="width: 160px">
                        <el-option  :value=1 label="添加/修改"></el-option>
                        <el-option  :value=2 label="其他操作"></el-option>
                        <el-option  :value=3 label="删除"></el-option>
                    </el-select>
                   
                </el-form-item>
                <el-form-item  label="操作人">
                    <el-input   size="small" v-model="queryParams.optUser" placeholder="操作人" style="width: 180px" @keyup.enter.native="search()"  />
                </el-form-item>
               
             
                <el-form-item  label="操作名称">
                    <el-input   size="small" v-model="queryParams.optName" placeholder="操作名称" style="width: 180px" @keyup.enter.native="search()" />
                </el-form-item>
                <el-form-item  label="请求参数">
                    <el-input   size="small" v-model="queryParams.optParams" placeholder="备注" style="width: 180px" @keyup.enter.native="search()" />
                </el-form-item>
                <el-form-item  label="响应内容">
                    <el-input   size="small" v-model="queryParams.optBody" placeholder="备注" style="width: 180px" @keyup.enter.native="search()" />
                </el-form-item>
                <el-form-item  label="操作时间">
                    <el-date-picker size="small"  type="daterange" @change="cbtime" v-model="others.btime" placeholder="开始时间" style="width: 240px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item >
                    <el-button size="small" v-on:click="search()" type="primary">搜索</el-button>
                    <el-button size="small" v-on:click="reset()">重置</el-button>
                </el-form-item>
           </el-form>
            <Table :loading="loading" :columns="columns" :data="sysRequestLogss" border>
            </Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'SysRequestLogs',
    data() {
        return {
            loading: false,

            queryParams: {

            },
            others: {
                btime: "",
                etime: ""
            },
            sysRequestLogs: {

            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            sysRequestLogss: [

            ],
            rules: {},
            columns: [{
                    title: '操作人',
                    key: 'optLevel',
                    width: 100,
                    align: 'center',
                     render: (h, params) => {
                        var me = this;
                        return h("div", [
                         
                            h("div", { style: { color: "#ff0000" } }, params.row.optUser)
                        ]);
                    }
                },  {
                    title: '操作方法',
                    key: 'optMethod',
                    width: 130,
                    align: 'center',
                    render: (h, params) => {
                        var me = this;
                        return h("div", [
                            h("div", { style: {} }, params.row.optName),
                            h("div", { style: {} }, params.row.optClass),
                            h("div", { style: { color: "#ff0000" } }, params.row.optMethod)
                        ]);
                    }
                }, {
                    title: '执行耗时时间',
                    key: 'optTime',
                    width: 130,
                    align: 'center'
                }, {
                    title: '请求IP',
                    key: 'optIp',
                    width: 130,
                    align: 'center'
                }, {
                    title: '请求时间',
                    key: 'createTime',
                    width: 130,
                    align: 'center',
                    render: (h, params) => {
                        var me = this;
                        return h("div", [
                            h("span", { style: {} }, me.long2datetime(params.row.createTime))
                        ]);
                    }
                }, {
                    title: '请求参数',
                    key: 'optParams',
                    width: 330,
                    align: 'center'
                }, {
                    title: '响应',
                    key: 'optBody',
                    width: 330,
                    align: 'center'
                },

            ]
        };
    },
    mounted: function() {
        this.getList();

    },
    methods: {
        cbtime: function(value) {
            if(value){
            this.queryParams.btime = value[0];
             this.queryParams.etime = value[1];
         }
         else{
             this.queryParams.btime ="";
             this.queryParams.etime ="";
         }
        },
       
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        reset: function() {
            this.queryParams = {};
            this.others = {};
            this.getList();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        getList: function() {
            var me = this;
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            me.loading = true;
            me.$http.post("/sys/sysRequestLogs/getList.action", params).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.page.total = body.obj.totalCount;
                    me.sysRequestLogss = body.obj.list;

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        }

    }
}
</script>
<style scoped>
</style>